<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #shuru{
            width: 400px;
            height: 40px;
            font-size:20px ;
        }
        #kuang{
            width: 406px;
            /* height: 200px; */
            margin-top: 10px;
            padding-bottom: 20px;
            padding-top:10px;
            /* background:red; */
            border:1px solid #333;

            display: none;
        }
        .ulok{
            /* background:rosybrown; */
            margin:0 auto;
            
        }
        .ulok li{
            width: 88%;
            height: 20px;
            border-bottom:1px solid #333;
            /* background:red; */
            list-style: none;
            padding-bottom:20px ;
            padding-top:20px ;
            font-size:20px;
        }
    </style>
</head>
<body>
    <div>
        <input id="shuru" type="text">
        <div id="kuang">
            <ul class="ulok">
                
            </ul>
        </div>
    </div>
<script>
    $('#shuru').bind('input',function(e){
        console.log($(this).val())
        var value = $(this).val()
        if(value !== ''){
            $.ajax({
                url:'sousuo.json',
                data:{
                    //应该把数据发送到数据后端进行处理然后返回数据渲染在前端
                    'souText':value
                },
                success:function(data){
                    console.log(JSON.parse(data))
                    var objData = JSON.parse(data)
                    $.each(objData,function(index,obj){
                        if(obj.name.indexOf(value) >= 0){
                            //清空原来的
                            $(".ulok").empty();
                            $.each(obj.value,function(index,zhi){
                                console.log(zhi)
                                $('.ulok').append('<li>'+ zhi +'</li>')
                            })
                            $("#kuang").css('display','block');
                            return false;
                        } 
                    })
                }
            })
        }else{
            //清空原来的
            $(".ulok").empty();
            $("#kuang").css('display','none'); 
        }
    }).bind('blur',function(e){
        //清空原来的
        $(".ulok").empty();
        $("#kuang").css('display','none');
    })





</script>
</body>
</html>